<template>
	<view>
		<u-popup :show="isDeposit" @close="close" mode="center" round="10" closeable>
			<view class="content">
				<text class="black size32 bold">退押金</text>
				<view class="row j-centert m-top30">
					<view class="bot" :class="refund_num >0?'bgcolor':'bgCC'"  @click="subBarrel">
						<view class="iconfont icon-jianhao white size38"></view>
					</view>
					<view class="Num">{{refund_num}}</view>
					<view class="bot " :class="refund_num < userinfo.refund_num?'bgcolor':'bgCC'" @click="addBarrel">
						<view class="iconfont icon-jiahao white size38"></view>
					</view>
				</view>
				
				<view class="configBtn flexac" 
				     :class="ifOnk?'bgcolor':'bgCC'" @click="ConifgBtn">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<!-- 退押金 -->
<script>
	export default {
		name: 'Deposit',
		props: ['isDeposit','userinfo'],
		data() {
			return {
				refund_num:0,
			}
		},
		methods: {
			subBarrel(){
				if(this.refund_num > 0) return this.refund_num--; 
			},
			addBarrel(){
				if(this.refund_num < this.userinfo.refund_num) return this.refund_num++; 
			},
			ConifgBtn(){
				if(this.refund_num <= 0 || this.refund_num > this.userinfo.refund_num) return;
				this.$http.post({
					url:'/WaterApi/directRefuse',
					data:{
						refund_num:this.refund_num
					}
				}).then(res=>{
					if(res.code != 200) return;
						this.$emit('close')
				})
				
			},
			close() {
				this.$emit('close')
			}
		},
		computed:{
			ifOnk(){
				return this.refund_num > 0 && this.refund_num <= this.userinfo.refund_num?true:false;
			}
		},
		watch:{
			userinfo(newVAL,oldVAL){
				this.refund_num = newVAL.refund_num;
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.content{
		width:500rpx;
		padding:50rpx 20rpx 20rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.Num{
		width:100rpx;
		height: 66rpx;
		color:#000;
		font-size:32rpx;
		font-weight: bold;
		text-align: center;
		line-height: 66rpx;
	}
	.bot{
		width:66rpx;
		height: 66rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6rpx;
	}
	.configBtn{
		width:300rpx;
		height: 80rpx;
		color:#fff;
		font-size:30rpx;
		border-radius: 10rpx;
		margin-top:40rpx;
	}
</style>